/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, Cell, Table, TableBody, TableRow, Text, useTheme,} from "customize-easy-ui-component";
import {useFolder, } from "../../hook/useMainRepUrlOr";
import {俩列检验设备概况} from "../../park/views";
import {config证书概要} from "./editorCert";
import Img_Seal from "../../../images/seal.png";
import {RepLink} from "../../common/base";

//证书
export const CertificatePage= ({ orc, rep, children} : { orc: any,rep: any,children?: React.ReactNode}
) => {
  const theme= useTheme();
  const callback = () => {
    return <div css={{"@media print": {height: '100vh', overflowY: 'hidden',}}}>
      <div css={{
        display: 'flex',
        justifyContent: 'space-between',
        textAlign: 'center',
        height: '1rem',
      }}>
        <div/>
        <div css={{overflow: 'hidden'}}>
          <Text variant="h6" css={{fontSize: '0.8rem'}}>FJB/RC 1038-2022</Text>
        </div>
      </div>

      <div css={{
        "@media print": {
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-around',
          height: 'calc(100vh - 4rem)',     //剪掉上面头部的高度
        }
      }}>
        <Text variant="h3" css={{textAlign: 'center', "@media print": {fontSize: theme.fontSizes[5],},}}>
          道路运输液体危险货物罐式车辆常压容器<br/>
          (罐体)合格证
        </Text>
        <div>
          <div css={{display: 'flex', justifyContent: 'space-between',}}>
            &nbsp;
            <Text css={{
              display: 'flex', flexDirection: 'row-reverse', marginRight: '2rem'
            }}>合格证编号：{rep.isp?.no}</Text>
          </div>
          <Table fixed={["13.9%", "47%", "13.9%", "%"]} css={{"@media print": {height: '81vh',}, borderCollapse: 'collapse'
          }} tight miniw={800}>
            <TableBody>
              {俩列检验设备概况({orc, rep, config: config证书概要})}
              <TableRow>
                <CCell>检验依据</CCell><CCell colSpan={3}>1．GB18564.1-2019《道路运输液体危险货物罐式车辆第1部分：金属常压罐体技术要求》<br/>
                2．交运发【2021】35号、《常压液体危险货物罐车治理罐体定期检验工作指南》</CCell>
              </TableRow>
              <TableRow css={{"@media print": {height: 'fill-available'}}}>
                <CCell colSpan={4} css={{
                  padding: 0,
                  "& > div": {        　//作用面较广泛，表示本身的直接子代div元素； 【中间一行是撑开的，高度上剩下的全部分给它】
                    height: '100%'
                  },
                }}>
                  <Table fixed={["13.9%", "49%", "%"]}
                         css={{borderCollapse: 'collapse', height: '100%'}} tight miniw={800}>
                    <TableBody>
                     <RepLink rep={rep} tag={'Certificate'}>
                        <TableRow css={{"@media print": {height: 'fill-available'}}}>
                          <CCell>适装介质列表</CCell>
                          <Cell colSpan={2}><div css={{minHeight: '2rem',whiteSpace:'pre-wrap',paddingLeft:'0.3rem'
                          }}>{orc.适装介列}</div></Cell>
                        </TableRow>
                      <TableRow>
                        <CCell>检验日期</CCell>
                        <CCell>{orc.检验日期 || '／'}</CCell>
                        <CCell rowSpan={3}>
                          <div css={{
                            height: '8rem',
                            '::before': {
                              filter: 'opacity(30%)',
                              width: '100%',
                              height: '100%',
                              backgroundImage: `url(${Img_Seal})`,
                              content: '" "',
                              position: 'absolute',
                              top: 0,
                              left: 0,
                              backgroundRepeat: 'no-repeat',
                              backgroundPosition: 'center',
                            }
                          }}>
                            <Table fixed={["40%", "%"]} css={{borderCollapse: 'collapse', height: 'fill-available'}} tight miniw={800}>
                              <TableBody>
                                <TableRow>
                                  <CCell css={{border: 'none'}}>机构核准证号：</CCell>
                                  <CCell css={{border: 'none'}}>{rep?.isp?.ispu?.agency?.apno}</CCell>
                                </TableRow>
                                <TableRow>
                                  <CCell css={{border: 'none'}} colSpan={2}>（检验机构公章或者检验专用章）</CCell>
                                </TableRow>
                                <TableRow>
                                  <CCell css={{border: 'none'}}>日期：</CCell>
                                  <Cell css={{border: 'none'}}>2024/03/04</Cell>
                                </TableRow>
                              </TableBody>
                            </Table>
                          </div>
                        </CCell>
                      </TableRow>
                      <TableRow>
                        <CCell>下次检验日期</CCell>
                        <CCell>{orc.新下检日}</CCell>
                      </TableRow>
                      <TableRow>
                        <CCell colSpan={2}><Text css={{fontSize: '1.3rem'}}>
                          {rep?.isp?.ispu?.name}</Text></CCell>
                      </TableRow>
                     </RepLink>
                    </TableBody>
                  </Table>
                </CCell>
              </TableRow>

            </TableBody>
          </Table>
        </div>
        <Text></Text>
      </div>
    </div>
  }
  //Hash路由的id对应的DIV 不可以放在Collapse组件底下的。 还未加载组件的无法定位。
  const [renderAll] = useFolder(callback, '检验证书折叠', true);
  return <>
    <div id="Certificate"/>
    {renderAll}
  </>;
};
